<%@ page contentType="text/html;charset=UTF-8" %>﻿
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<meta content="" name="description"/>
<meta content="" name="author"/>

<link rel="stylesheet" type="text/css" href="${ctx}/static/js/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/static/js/themes/IconExtension.css" />
<style type="text/css"> 
.BMap_bubble_content div:nth-child(2) {display:none}
</style>
</head>
<c:choose>
<c:when  test="${!empty error}">
${error}
</c:when>
<c:otherwise>
<body class="easyui-layout layout" style="background: #fff;">
	<c:choose>
	<c:when  test="${!empty error}">
	${error}
	</c:when>
	<c:otherwise>
	
	</c:otherwise>
	</c:choose>
	<div id="imgShow"  style="position: absolute;display:none;border: 4px #ccc solid ;z-index:10;background-color:#fff;padding:5px;"><img src="" width="150px"></div>
	<div  region="north" border="false" title="搜索条件1" collapsed="false"
		style="height: 160px; overflow:hidden;background: #eee;border-bottom:1px solid #ddd" align="left">
		<form id="searchForm">
			<table style="height: 100%;width:auto;">
				<tr>
					<td>区域</td>
					<td><input value="长沙" name="startDate" class="easyui-textbox" ></td>
					<td><a href="javascript:void(0);" class="easyui-linkbutton"
						iconCls="icon-search" onclick="_search();">查询</a><a
						href="javascript:void(0);" class="easyui-linkbutton"
						onclick="cleanSearch();">重置</a></td>
						<td><span  id="upbtn"></span></td>
				</tr>
			</table>
		</form>
		输入员工id分派：
		<form id="deployForm" action="${ctx}/deployBill/deploy" method="POST">
		<input id="empId" type="text"  name="empId" ></input>
		<input type="text"  name="workBillId" value="${workbill.id}" ></input>
		<button type="submit">分派</button>
		</form>
	</div>
	<div region="center" border="false">
		<table id="tt" style="width:700px;height:auto"
			title="Editable DataGrid" iconCls="icon-map_add" singleSelect="true"
			idField="itemid">
			<thead>
				<tr>
					<th field="itemid" width="80">员工编号</th><th field="listprice" width="80" align="right" editor="{type:'numberbox',options:{precision:1}}">员工名</th>
					<th field="productid" width="100" formatter="productFormatter" editor="{type:'combobox',options:{valueField:'productid',textField:'name',data:products,required:true}}">区域</th>
					<th field="unitcost" width="80" align="right" editor="numberbox">当前所在地</th>
					<th field="attr1" width="250" editor="text">最后心跳时间</th>
					<th field="status" width="60" align="center" editor="{type:'checkbox',options:{on:'P',off:''}}">所属门店</th>
				</tr>
			</thead>
		</table>
	</div>
<div id="w" class="easyui-window" modal="true" collapsible="false" minimizable="false"
maximizable="false"
fit="true"
 title="在地图上选取人员" iconCls="icon-map_add" style="padding:5px;">
	<div class="easyui-layout" fit="true">
		<div id=map region="center" border="false" style="padding:10px;background:#fff;border:1px solid #ccc;">
		</div>
	</div>
</div>
<script type="text/javascript" src="${ctx}/static/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="${ctx}/static/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${ctx}/static/js/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${ctx}/static/workbill/deploy.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=794a1b0f19a532562137b981090681dc"></script>
<script>
		var products = [
		    {productid:'FI-SW-01',name:'Koi'},
		    {productid:'K9-DL-01',name:'Dalmation'},
		    {productid:'RP-SN-01',name:'Rattlesnake'},
		    {productid:'RP-LI-02',name:'Iguana'},
		    {productid:'FL-DSH-01',name:'Manx'},
		    {productid:'FL-DLH-02',name:'Persian'},
		    {productid:'AV-CB-01',name:'Amazon Parrot'}
		];
		function productFormatter(value){
			for(var i=0; i<products.length; i++){
				if (products[i].productid == value) return products[i].name;
			}
			return value;
		}
		$(function(){
			
			$('#w').window('close');
			var lastIndex;
			$('#tt').datagrid({
				title : '',
				iconCls : 'icon-save',
				pagination : true,
				pageSize : 20,
				pageList : [ 20, 50, 100 ],
				fit : true,
				fitColumns : true,
				rownumbers : true,
				nowrap : false,
				border : false,
				idField : 'ID',
				sortName : 'CTIME',
				sortOrder : 'desc',
				toolbar:[{
					text:'从地图上选取最近人员',
					iconCls:'icon-map_add',
					handler:function(){
						$('#w').window('open');
						// 百度地图API功能
						var map = new BMap.Map("map");  
						map.centerAndZoom("长沙",14); 
						map.enableScrollWheelZoom(true);
						var myIcon = new BMap.Icon("${ctx}/static/images/marker_red_sprite.png",new BMap.Size(39,25));
						var myIconG = new BMap.Icon("${ctx}/static/images/marker_gray_sprite.png",new BMap.Size(39,25));
						var marker1 = new BMap.Marker(new BMap.Point(113.00781, 28.207494),{icon:myIcon});
						var marker2 = new BMap.Marker(new BMap.Point(113.042019, 28.180369),{icon:myIconG});
						var marker3 = new BMap.Marker(new BMap.Point(113.055817, 28.190048),{icon:myIcon});
						var marker4 = new BMap.Marker(new BMap.Point(113.034257, 28.190939),{icon:myIconG});
						var marker5 = new BMap.Marker(new BMap.Point(113.04863, 28.188647),{icon:myIcon});
						var marker6 = new BMap.Marker(new BMap.Point(113.043025, 28.21055),{icon:myIcon});
						map.addOverlay(marker1); 
						map.addOverlay(marker2); 
						map.addOverlay(marker3); 
						map.addOverlay(marker4); 
						map.addOverlay(marker5); 
						map.addOverlay(marker6); 
						var opts = {
								  width : 400,     // 信息窗口宽度
								  height: 250,     // 信息窗口高度
								}
						var sContent =
							"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>E01001 张三</h4>" + 
							"<table style='width:100%'>"+
							"<tr><td rowspan=4><img style='float:left;margin:4px' id='imgDemo' src='${ctx}/static/images/noface.gif' width='156' height='156' title='张三'/></td><td>所属区域：芙蓉区</td></tr>" + 
							"<tr><td>所属机构：长沙分公司</td></tr>" + 
							"<tr><td>状态：在线</td></tr>" + 
							"<tr><td>最后心跳时间：2015-05-09 15:11:12</td></tr></table>" +
							"<button onclick='deployInMap()'>选取</button>" +
							" <input id='idInMap' type=text value='1'>" +
							"</div>";
							var sContent1 =
								"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>E01002 李四</h4>" + 
								"<table style='width:100%'>"+
								"<tr><td rowspan=4><img style='float:left;margin:4px' id='imgDemo' src='${ctx}/static/images/noface.gif' width='156' height='156' title='张三'/></td><td>所属区域：芙蓉区</td></tr>" + 
								"<tr><td>所属机构：长沙分公司</td></tr>" + 
								"<tr><td>状态：离线</td></tr>" + 
								"<tr><td>最后心跳时间：2015-05-09 15:11:12</td></tr></table>" +
								"<button onclick='deployInMap()'>选取</button>" +
								" <input id='idInMap' type=text value='1' />" +
								"</div>";
						var infoWindow = new BMap.InfoWindow(sContent,opts);
						var infoWindowG = new BMap.InfoWindow(sContent1,opts);
						marker1.addEventListener("click", function(){          
							   this.openInfoWindow(infoWindow);
							   //图片加载完毕重绘infowindow
							   document.getElementById('imgDemo').onload = function (){
								   infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
							   }
						});
						marker2.addEventListener("click", function(){          
							   this.openInfoWindow(infoWindowG);
							   //图片加载完毕重绘infowindow
							   document.getElementById('imgDemo').onload = function (){
								   infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
							   }
						});
						marker3.addEventListener("click", function(){          
							   this.openInfoWindow(infoWindow);
							   //图片加载完毕重绘infowindow
							   document.getElementById('imgDemo').onload = function (){
								   infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
							   }
						});
						marker4.addEventListener("click", function(){          
							   this.openInfoWindow(infoWindowG);
							   //图片加载完毕重绘infowindow
							   document.getElementById('imgDemo').onload = function (){
								   infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
							   }
						});
						marker5.addEventListener("click", function(){          
							   this.openInfoWindow(infoWindow);
							   //图片加载完毕重绘infowindow
							   document.getElementById('imgDemo').onload = function (){
								   infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
							   }
						});
						marker6.addEventListener("click", function(){          
							   this.openInfoWindow(infoWindow);
							   //图片加载完毕重绘infowindow
							   document.getElementById('imgDemo').onload = function (){
								   infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
							   }
						});
						map.addEventListener("click",function(e){
							$('#w').window('setTitle',"在地图上选取人员:"+e.point.lng + "," + e.point.lat);
						});
					}
				}],
				onBeforeLoad:function(){
					$(this).datagrid('rejectChanges');
				},
				onClickRow:function(rowIndex){
					if (lastIndex != rowIndex){
						$('#tt').datagrid('endEdit', lastIndex);
						$('#tt').datagrid('beginEdit', rowIndex);
					}
					lastIndex = rowIndex;
				}
			});
		});
	</script>
	
</body>
</c:otherwise>
</c:choose>

</html>